<template>
	<div>
		<teleport to="body">
			<!-- 蒙版 -->
			<transition name="fade">
				<div
					v-if="modelValue"
					class="w-screen h-screen bg-zinc-800/80 fixed top-0">
					蒙版
				</div>
			</transition>
			<!-- 内容区域 -->
			<transition name="popup-down-up" v-if="modelValue"
				><div class="fixed bottom-0 rounded-t-md w-screen bg-white z-50">
					<slot></slot></div
			></transition>
		</teleport>
	</div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useScrollLock } from '@vueuse/core'
const props = defineProps({
	modelValue: {
		type: Boolean,
		reuqired: true,
	},
})
const emit = defineEmits(['update:modelValue'])
/**
 * 弹窗时候锁定body滚动
 */
const isLocked = useScrollLock(document.body)
watch(
	() => props.modelValue,
	(newVal) => {
		isLocked.value = newVal
	},
	{
		immediate: true,
	},
)
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active,
.popup-down-up-enter-active,
.popup-down-up-leave-active {
	transition: all 0.3s;
}

.fade-enter-from,
.fade-leave-to,
.popup-down-from,
.popup-down-to {
	opacity: 0;
}
</style>
